<template>
  <div class="chapter-div" id="chapterModal">
    <!--头部-->
    <div class="chaphead">
      <div>{{title}}</div>
      <span>共{{idList.length}}题</span>
    </div>
    <!--内容-->
    <div class="chapter-box">
      <div
        style="overflow:auto; top:0.45rem;bottom:0rem;padding-top:0.22rem;"
      >
        <div class="">
          <!--此处循环-->
          <div
            :class="'chapter-item '+(index == currentIdx? 'active':'')"
            v-for="(item,index) in idList"
            :key="index"
            @click.stop="choice_problem($event,index)"
          >{{index+1}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 题目数量列表
    idList: {
      type: Array,
      default: () => []
    },
    //题目名称
    title: {
      type: String,
      default: ""
    },
    // 当前题目索引
    currentIdx: {
      type: Number,
      default: 0
    }
  },
  methods:{
    //选择题目
    choice_problem(event,index){
      event.preventDefault();
      this.$emit('card-choice-problem',index)
    }
  }
};
</script>
<style scoped lang="scss">
.bg-black {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.5rem;
}

.bg-content {
  width: 2.96rem;
  height: 2.96rem;
  background: #ffffff;
  border-radius: 0.04rem;
  padding: 0.2rem;
  position: relative;

  .title {
    text-align: center;
  }

  .bg-btn {
    margin-top: 0.2rem;
    width: 100%;
    display: flex;
    justify-content: center;

    .bg-submit {
      width: 2rem;
      height: 0.36rem;
      background: url("../../assets/images/btn-bg-blue@3x.png") no-repeat
        center/cover;
      background-size: 2.3rem 0.9rem;
      border: none;
    }
  }
}

// 笔记弹框
.chapter-div {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  overflow: scroll;
  background: #ffffff;
  z-index: 999;

  .chaphead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.12rem;
    div {
      font-size: 0.16rem;
      color: #000000;
      font-weight: bold;
    }

    span {
      color: #909399;
      font-size: 0.14rem;
    }
  }

  .chapter-box {
    overflow: hidden;
    clear: both;
    padding-left: 0.08rem;

    .chapter-item {
      display: inline-block;
      width: 0.24rem;
      height: 0.24rem;
      box-shadow: 0rem 0.02rem 0.04rem 0rem rgba(0, 0, 0, 0.06);
      border-radius: 0.04rem;
      margin: 0 0 0.2rem 0.4rem;
      text-align: center;
      line-height: 0.24rem;
      font-size: 0.14rem;
      color: #0486fe;
      background: #ffffff;
    }

    .chapter-item.active {
      color: #ffffff;
      background: #0486fe;
    }
  }
}
</style>





